<template>
  <div class="navHead">
    <div class="flexBox">
      <div class="menuIcon" @click="setIsCollapse">
        <menu-fold-one v-show="isCollapse" theme="filled" size="24" fill="#333" />
        <menu-unfold-one v-show="!isCollapse" theme="filled" size="24" fill="#333" />
      </div>

      <!-- <div class="codeOneDiv" @click="dianjiQrCode(userInfoCopy.id)">
        微信通知绑定
      </div> -->
    </div>
    <div class="navHeadItem">
      <!-- <div class="item2 marginRight">
        <search theme="outline" size="22" fill="#333" />
      </div>
      <div class="item2 marginRight drop">
        <remind theme="outline" size="22" fill="#333" />
      </div> -->

      <el-dropdown>
        <img class="item3" :src="userInfoCopy.avatar" alt="" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="findInfoByLoginUser"> 个人信息 </el-dropdown-item>
            <el-dropdown-item @click="userPasswordShow = !userPasswordShow"> 修改密码 </el-dropdown-item>
            <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="item4 marginRight">{{ userInfoCopy.username }}</div>
    </div>

    <!-- 修改个人信息 -->
    <el-dialog :close-on-click-modal="false" v-model="userMessageShow" width="500px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">个人信息</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel" v-loading="loading">
        <el-form :model="userForm" :rules="rules" ref="userForm">
          <el-form-item>
            <div class="labelItem" style="width: 100%; margin-bottom: 2px">
              <div class="term fromFlex">
                <div class="label">用户头像</div>
                <div class="labelHead">
                  <div class="sexHead">
                    <div class="addImg">
                      <el-upload class="uploadDemo" :file-list="[]" action="#" multiple :limit="1" :show-file-list="false"
                        :http-request="() => { }" :on-change="addAllChangeImg" value-format="timestamp"
                        accept=".jpg,.png,JPG,PNG" :auto-upload="false">
                        <template #trigger>
                          <img class="headerImg" :src="imageList[0] || ''" alt="" />
                        </template>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="labelItem" style="width: 100%; margin-bottom: 2px">
              <div class="term fromFlex">
                <div class="label">用户名</div>
                <div>
                  <el-input size="large" v-model="userInfo.username" maxlength="16" placeholder="请输入用户名" clearable />
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item prop="name">
            <div class="labelItem" style="width: 100%; margin-bottom: 2px">
              <div class="term fromFlex">
                <div class="label">账号/手机号</div>
                <div>
                  <el-input size="large" :disabled="true" v-model="userInfoCopy.phone" placeholder="请输入账号/手机号"
                    clearable />
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>

        <div class="labelBtn">
          <div class="btn default" @click="userMessageShow = false">取消</div>
          <div class="btn info" @click="updateInfoByLoginUser">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 修改密码 -->
    <el-dialog :close-on-click-modal="false" v-model="userPasswordShow" width="500px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">修改密码</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel" v-loading="loading">
        <el-form :model="userForm" :rules="rules" ref="userForm">
          <el-form-item prop="originalPassword">
            <div class="labelItem" style="width: 100%; margin-bottom: 2px">
              <div class="term fromFlex">
                <div class="label">原密码</div>
                <div>
                  <el-input size="large" v-model.trim="userForm.originalPassword" type="password" placeholder="请输入密码"
                    clearable />
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="newPassword">
            <div class="labelItem" style="width: 100%; margin-bottom: 2px">
              <div class="term fromFlex">
                <div class="label">新密码</div>
                <div>
                  <el-input size="large" v-model.trim="userForm.newPassword" type="password" placeholder="请输入确认密码"
                    clearable />
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <div class="labelItem" style="width: 100%; margin-bottom: 2px">
              <div class="term fromFlex">
                <div class="label">确认密码</div>
                <div>
                  <el-input size="large" v-model.trim="userForm.confirmPassword" type="password" placeholder="请输入确认密码"
                    clearable />
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>

        <div class="labelBtn">
          <div class="btn default" @click="userPasswordShow = false">取消</div>
          <div class="btn info" @click="updatePasswordByLoginUser">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 绑定微信二维码窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="QRcodeDialogVisible" :show-close="false" width="460px" align="center">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">绑定微信通知步骤</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="loginQrcode" v-loading="loading">
        <div class="bzOne">
          <div class="boxText">步骤1：微信扫码关注“江西学一宜人软件”公众号</div>
          <img style="width: 210px; height: 210px" src="../assets/image/xyyrQrCode.png" alt="" />
        </div>
        <div class="bzOne">
          <div class="boxText">步骤2：关注公众号成功后，微信扫码通知授权</div>
          <qrcode-vue :value="qrCodeUrl" :size="200" level="H"></qrcode-vue>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import QrcodeVue from 'qrcode.vue'
export default {
  components: {
    QrcodeVue,
  },
  data() {
    return {
      userInfo: {},
      userInfoCopy: {},
      imageList: [],
      loading: false,
      isCollapse: false,
      QRcodeDialogVisible: false,
      userMessageShow: false,
      userPasswordShow: false,
      name: '',
      userForm: {
        originalPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      rules: {
        originalPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'change',
          },
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'change',
          },
        ],
        confirmPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'change',
          },
        ],
      },
    }
  },
  mounted() {
    this.userInfoCopy = JSON.parse(localStorage.getItem('dtUsersVo'))
  },
  methods: {
    //点击打开dialog组件并且生成二维码
    dianjiQrCode(id) {
      this.QRcodeDialogVisible = true
      this.GetQRcode(id)
    },
    //  生成二维码
    GetQRcode(id) {
      let url = 'http%3A%2F%2Faxh.dfr.cool%2Fbind%2Fwx'
      let src =
        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx025fe1541980faae&redirect_uri=' +
        url +
        '&response_type=code&scope=snsapi_userinfo&state=' +
        id +
        '&connect_redirect=1#wechat_redirect'
      this.qrCodeUrl = src
    },

    //修改密码
    updatePasswordByLoginUser() {
      this.userPassWordShow = true
      this.loading = true
      if (!this.userForm.originalPassword || this.userForm.originalPassword === ' ') {
        this.$message({
          type: 'error',
          message: '原密码不能为空',
        })
        return
      }
      if (!this.userForm.newPassword || this.userForm.newPassword === ' ') {
        this.$message({
          type: 'error',
          message: '新密码不能为空',
        })
        return
      }
      if (!this.userForm.confirmPassword || this.userForm.confirmPassword === ' ') {
        this.$message({
          type: 'error',
          message: '确认密码不能为空',
        })
        return
      }
      this.$http.post('/axh/dtUsers/updatePasswordByLoginUser', this.userForm).then((res) => {
        this.$message({
          type: 'success',
          message: res.msg,
        })
        this.userPasswordShow = false
        this.loading = false
        this.userForm = {}
      })
    },
    //修改个人信息里的头像以及用户名
    updateInfoByLoginUser() {
      this.loading = true
      if (!this.userInfo.username || this.userInfo.username === ' ') {
        this.$message({
          type: 'error',
          message: '用户名不能为空',
        })
        return
      }
      this.$http
        .post('/axh/dtUsers/updateInfoByLoginUser', {
          avatar: this.userInfo.avatar,
          username: this.userInfo.username,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.msg,
            })
            this.userInfoCopy.username = this.userInfo.username
            this.userInfoCopy.avatar = this.userInfo.avatar
            this.$store.commit('setUserInfo', this.userInfoCopy)
            this.userMessageShow = false
            this.loading = false
          }
        })
    },
    //查询个人信息(头像以及用户名)
    findInfoByLoginUser() {
      this.userMessageShow = true
      this.$http.post('/axh/dtUsers/findInfoByLoginUser', {}).then((res) => {
        this.userInfo = res.result
        this.imageList.push(this.userInfo.avatar)
      })
    },
    // 上传添加图片到文件列表
    addAllChangeImg(e) {
      this.uploadImage(e.raw).then((res) => {
        this.imageList[0] = res.result
        this.userInfo.avatar = this.imageList[0]
      })
    },
    setIsCollapse() {
      this.isCollapse = !this.isCollapse
      this.$store.commit('setIsCollapse', this.isCollapse)
    },
    // 退出登录
    outLogin() {
      ElMessageBox.confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(() => {
        setTimeout(() => {
          localStorage.clear()
          sessionStorage.clear()
          this.$store.commit('clearVisitedTags')
          this.$router.replace({ path: '/login' })
          location.reload()
        }, 200)

        setTimeout(() => {
          ElNotification({
            title: '提示',
            message: '已成功退出登录!',
            type: 'success',
          })
        }, 800)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.navHead {
  height: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  display: flex;

  .loginQrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .bzOne {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 38px;

      .boxText {
        font-size: 18px;
        margin-bottom: 16px;
      }
    }
  }

  .flexBox {
    display: flex;
    align-items: center;

    .menuIcon {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .codeOneDiv {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-left: 30px;
      padding: 4px 10px;
      border-radius: 2px;
      color: #fff;
      background: #c0a07f;
    }
  }

  .navHeadItem {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-right: 18px;

    .marginRight {
      margin-right: 20px;
    }

    .item2 {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .drop {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: $bgColorF64C4C;
      }
    }

    .item3 {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 8px;
      cursor: pointer;
      object-fit: cover;
    }

    .item4 {
      color: $color333333;
    }

    .item5 {
      font-size: 16px;
      color: $color999999;
      cursor: pointer;
    }
  }
}

.labelItem {
  .headerImg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }

  .btn {
    font-size: 14px;
    min-width: 56px;
    height: 30px;
    width: 56px;
    font-weight: 400;
    border-radius: 2px;
  }
}
</style>
